<template>
  <div class="sale">
    <div class="top_button">
      <div class="partition"></div>
    </div>

    <el-table :data="
      sale.filter(
        (data) =>
          !search ||
          data['商品编码'].toLowerCase().includes(search.toLowerCase()) ||
          data['商品名称'].toLowerCase().includes(search.toLowerCase())
      )
    " border height="calc(100vh - 90px)" v-loading="isres" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="width: 100%"
      row-key="商品编码">

      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column v-for="(col, i) in cols" :key="i" :prop="col" :label="col" sortable></el-table-column>
      <el-table-column align="right" width="140" type="expand">
        <template #header>
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template #default="props">
          <el-table style="width: 100%" border :show-summary="true" :data="
            alldata.filter((data) => {
              if (!data['商品编码']) {
                return;
              }
              return (
                !props.row['商品编码'] ||
                data['商品编码'].includes(props.row['商品编码'])
              );
            })
          ">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column v-for="(col, i) in slotcols" :key="i" :prop="col" :label="col" :min-width="colsAttr[col]"
              sortable></el-table-column>
            <el-table-column fixed="right" width="200">
              <template #default="scope">
                <div class="update" style="display:flex;">
                  <div>
                    <el-input v-model="scope.row.inputprocreate" tr="current-row-key" placeholder="修改生产日"
                      class="num"></el-input>
                    <el-input v-model="scope.row.inputdqr" tr="current-row-key" placeholder="修改到期日"
                      class="num"></el-input>

                    <el-input v-model="scope.row.inputnum" tr="current-row-key" placeholder="修改数量" class="num"></el-input>
                  </div>

                  <el-button class="baocun" @click="
                    preservation(
                      scope.row.id,
                      scope.row['数量'],
                      scope.row['到期日'],
                      scope.row['生产日'],
                      scope.row.inputnum,
                      scope.row.inputdqr,
                      scope.row.inputprocreate
                    )
                  " type="primary" style="width: 100%" plain>保存</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <tool :multipleTable="sale"></tool>
</template>
<script>
import { reactive, toRefs } from "vue";
import { small, selprolist, updqr } from "@/api/pandian";
import { ElMessage } from "element-plus";
import tool from "./components/tool";
export default {
  components: {
    tool,
  },
  setup() {
    const data = reactive({
      cols: [],
      sale: [],
      alldata: [{ 商品名称: "哈哈哈哈" }, { 商品编码: "111111" }],
      slotcols: [],
      isres: false,
      search: "",
      colsAttr: {
        "商品名称": "200",
      }
    });
    const loaded = async () => {
      data.isres = true;

      const result = await small.get();
      data.isres = false;
      if (result.data.length == 0) {
        data.sale = [];
        ElMessage.success({
          message: "还没有盘呢",
          type: "success",
        });
      } else {
        data.sale = result.data;

        data.cols = Object.keys(result.data[0]);
      }

      const res = await selprolist.post({ ck: "小仓" });
      data.alldata = res.data;

      data.slotcols = Object.keys(res.data[0]);

    };

    const preservation = async (id, num, dqr, procreate, newnum, newdqr, newprocreate) => {
      const result = await updqr.post({
        id,
        upnum: newnum ? newnum : num,
        updqr: newdqr ? newdqr : dqr,
        upprocreate: newprocreate ? newprocreate : procreate
      });
      if (result.code == 200) {
        ElMessage.success({
          message: "恭喜你，这是一条成功消息",
          type: "success",
        });
        data.alldata.filter(
          (data) => {
            if (data['id'] == id) {
              data['数量'] = newnum ? newnum : num;
              data['到期日'] = newdqr ? newdqr : dqr;
              data['生产日'] = newprocreate ? newprocreate : procreate
            }
          }
        )
      } else {
        ElMessage.success({
          showClose: true,
          message: "错了哦，这是一条错误消息",
          type: "error",
        });
      }
    };
    loaded();
    return { ...toRefs(data), preservation };
  },
};
</script>
